<template>
  <div class="contanier">
    <div class="date">
      <div>当前日期为:{{ currentTime | date }}</div>
    </div>
    <div class="data">
      <div id="shi" style="width:700px;height:400px;" />
      <div id="light" style="width:700px;height:400px;" />
      <div id="warm" style="width:700px;height:300px;" />
      <div id="co2" style="width:700px;height:300px;" />
    </div>
    <div class="bottom">
      <p>具体数值参照表</p>
      <div class="detail">
        <div>
          空气湿度适宜范围:
          相对应湿度为65~80%
        </div>
        <div>
          光照强度适宜范围
          1.2万~2万Lux（勒克斯）
        </div>
        <div>
          二氧化碳适宜范围：
          320~1000mg/kg
        </div>
        <div>空气温度适宜范围:
          23～34℃</div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'VueElementAdminText',
  filters: {
    date(value) {
      const date = new Date(value)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}-${month}-${day}`
    }
  },

  data() {
    return {
      dialogFormVisible: false,
      currentTime: new Date()
    }
  },

  mounted() {
    this.initCo2()
    this.initLight()
    this.initWarm()
    this.initShi()
  },

  methods: {
    initCo2() {
      const co2 = echarts.init(document.getElementById('co2'))
      const option = {
        title: {
          text: '温度'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          name: '时间',
          data: ['00', '04', '08', '12', '16', '20', '24']
        },
        yAxis: {
          type: 'value',
          name: '摄氏度',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            type: 'line',
            name: '摄氏度',
            smooth: true,
            data: [16, 20, 22, 24, 30, 25, 20]
          }
        ]
      }
      co2.setOption(option)
    },
    initLight() {
      const light = echarts.init(document.getElementById('light'))
      const option = {
        title: {
          text: '光照强度'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '15%'
        },
        xAxis: {
          type: 'category',
          name: '时间',
          data: ['00', '04', '08', '12', '16', '20', '24']
        },
        yAxis: {
          type: 'value',
          name: '光照强度（勒克斯）',
          axisLabel: {
            formatter: '{value}lux'
          }
        },
        series: [
          {
            type: 'line',
            name: '光照强度',
            smooth: true,
            data: [24000, 20000, 22000, 20004, 30000, 25000, 20000]
          }
        ]
      }
      light.setOption(option)
    },
    initWarm() {
      const warm = echarts.init(document.getElementById('warm'))
      const option = {
        title: {
          text: 'Co2浓度'
        },
        grid: {
          left: '15%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          name: '时间',
          data: ['00', '04', '08', '12', '16', '20', '24']
        },
        yAxis: {
          type: 'value',
          name: '二氧化碳浓度',
          axisLabel: {
            formatter: '{value}(mg/kg)'
          }
        },
        series: [
          {
            type: 'line',
            name: 'Co2浓度(mg/kg)',
            smooth: true,
            data: [350, 400, 600, 780, 500, 450, 600]
          }
        ]
      }
      warm.setOption(option)
    },
    initShi() {
      const shi = echarts.init(document.getElementById('shi'))
      const option = {
        title: {
          text: '湿度'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          name: '时间',
          data: ['00', '04', '08', '12', '16', '20', '24']
        },
        yAxis: {
          type: 'value',
          name: '湿度',
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: [
          {
            type: 'line',
            name: '湿度',
            smooth: true,
            data: [60, 70, 65, 60, 80, 55, 65]
          }
        ]
      }
      shi.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.contanier {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  .data {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }

  .date {
    margin: 10px 0px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 30px;
    background-color: aquamarine;
  }

  .bottom {
    display: flex;
    font-weight: 900;
    font-size: 18px;
    background-color: rgb(93, 170, 238);
    justify-content: space-around;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    height: 90px;
    width: 1400;

    .detail {
      display: flex;
      justify-content: space-around;
      width: 1400px;
      font-weight: 900;
      font-size: 18px;
    }
  }
}
</style>
